<template>
  <div class="row q-gutter-sm my-group-item">
    <template v-for="(item, index) in btnList" :key="index">
      <q-btn
        flat
        dense
        size="sm"
        color="white"
        :icon="item.icon"
        @click="item.callback"
      >
        <q-tooltip>{{item.label}}</q-tooltip>
      </q-btn>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue';


//定义函数类型
interface cbFunction {
  (a:number, b:number): void
}

//定义按钮组项
export interface BtnGroupItem {
  label: string,
  icon: string,
  callback: cbFunction|null
}

export default defineComponent({
  name: 'ToolGroupItem',
  props: {
    btnList: {
      type: Array as PropType<BtnGroupItem[]>,
      default: () => {
        return [] as BtnGroupItem[]
      }
    }
  },

  setup (props, context) {
    const {
      btnList
    } = toRefs(props);

    return {
      btnList
    }
  }
})
</script>

<style scoped>
.my-group-item {
  padding: 0px;
  margin: 0px;
}
</style>
